<template>
	<view class="container">
		<view class="content">
			<view class="repair-check">
				<icon v-if="render.repairState.id==7009" type="warn" size="48" color="red"></icon>
				<icon v-if="render.repairState.id==7008" type="success" size="48" color="#2fd178"></icon>
				<icon v-if="render.repairState.id==7007" type="waiting" size="48" color="#0068ff"></icon>
				<view>
					<text v-if="render.repairState.id==7007">您的维修申请审核中，请耐心等待</text>
					<text v-if="render.repairState.id==7009">审核未通过</text>
					<text v-if="render.repairState.id==7008">审核通过</text>
				</view>
			</view>
			<view class="maintenance-process">
				<uni-section title="维修流程" type="line" titleFontSize="18px" padding>
					<uni-steps :options="list" active-color="#2ed477" :active="active" direction="column" />
				</uni-section>
			</view>
			<view class="repair-information">
				<uni-section title="报修信息	" type="line" titleFontSize="18px" padding>
					<uni-forms ref="baseForm" :modelValue="baseFormData" label-width="140rpx" labelPosition="top">
						<uni-forms-item required label="报修房屋:">
							<uni-easyinput :inputBorder="false" v-model="baseFormData.address" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="维修项目:">
							<uni-easyinput @focus="focus('/pages/maintenancereport/maintenanceitems/maintenanceitems')"
								suffixIcon="right" :clearable="false" :inputBorder="false" v-model="baseFormData.item"
								placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="标题:">
							<uni-easyinput :inputBorder="false" v-model="baseFormData.title" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="问题描述:">
							<uni-easyinput :inputBorder="false" type="textarea" v-model="baseFormData.describe"
								placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="手机号码:">
							<uni-easyinput :inputBorder="false" v-model="baseFormData.tel" placeholder="请输入手机号" />
						</uni-forms-item>
						<uni-forms-item required label="预约日期:">
							<uni-datetime-picker :border="false" type="date" :clear-icon="false"
								v-model="baseFormData.date" placeholder="请选择预计上门时间" @maskClick="maskClick" />
						</uni-forms-item>
						<uni-forms-item required label="问题附件:">
							<uni-file-picker @select="select" fileMediatype="image" :image-styles="imageStyles"
								v-model="baseFormData.enclosure" limit="3" />
						</uni-forms-item>
					</uni-forms>
				</uni-section>
			</view>
		</view>
		<view class="footer">
			<button class="edit" type="primary" @click="edit()">修改</button>
			<button type="warn" plain="true" @click="revoke">撤销申请</button>
		</view>

	</view>
</template>

<script>
	import {
		render
	} from "vue";
	import {
		http
	} from '../../../utils/http.js'
	export default {
		data() {
			return {
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						color: "#80d8ff",
						width: 2,
						style: 'dashed',
						radius: '2px'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						radius: 2
					}
				},
				render: {},
				active: 0,
				list: [],
				baseFormData: {
					address: '',
					item: '',
					title: '',
					describe: '',
					tel: '',
					date: '',
					enclosure: [{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					}]
				},
				imgsrc: ''
			}
		},
		methods: {
			edit() {
			let	v = JSON.stringify(this.render);
				uni.navigateTo({
					url: '/pages/maintenancereport/maintenanceinformation/maintenanceinformation?data=' + v,
				})
			},
			revoke() {
				uni.showModal({
					content: '确定撤销此维修申请吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								title: '撤销成功',
								icon: 'success',
								duration: 2000,
								success() {
									uni.navigateTo({
										url: '/pages/maintenancereport/maintenancereport/maintenancereport'
									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			select(e) {
				this.imgsrc = e.tempFilePaths[0];
				let resurl = {
					url: ''
				};
				uni.uploadFile({
					url: 'http://123.57.203.155:8077/oss/upload', //仅为示例，非真实的接口地址
					filePath: this.imgsrc,
					name: 'file',
					method: 'post',
					header: {
						"Content-Type": "mutipart/form-data",
					},
					success: (res) => {
						if (res.statusCode == 200) {
							resurl.url = JSON.parse(res.data).data.url;
							this.baseFormData.enclosure.push(resurl);
						}
					}
				});
			}

		},
		onLoad(options) {
			this.render = JSON.parse(options.data);
			this.baseFormData.address = this.render.house.room;
			this.baseFormData.item = this.render.secondItem.repairProject.maintenanceItemType + '-' + this.render
				.secondItem.secondItemType;
			this.baseFormData.title = this.render.title;
			this.baseFormData.describe = this.render.detail;
			this.baseFormData.tel = this.render.phone;
			this.baseFormData.date = this.render.orderDate;
			this.baseFormData.enclosure = [];
			//审核步骤条
			switch (this.render.repairState.id) {
				case 7007:
					this.list = [{
						title: '提交维修申请',
						desc: '提交成功 09/09 10:30'
					}, {
						title: '审核中',
						desc: '物业审核中 09/10 10:30'
					}]
					break;
				case 7008:
					this.list = [{
						title: '提交维修申请',
						desc: '提交成功 09/09 10:30'
					}, {
						title: '审核中',
						desc: '物业审核中 09/09 10:30'
					}, {
						title: '审核通过',
						desc: '审核结束 09/09 10:30'
					}]
					break;
				case 7009:
					this.list = [{
						title: '提交维修申请',
						desc: '提交成功 09/09 10:30'
					}, {
						title: '审核中',
						desc: '物业审核中 09/09 10:30'
					}, {
						title: '审核不通过',
						desc: '审核结束 09/09 10:30'
					}]
					break;
			}
			this.active = this.list.length - 1;
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		position: relative;

		.content {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			overflow-y: scroll;
			margin-bottom: 240rpx;

			.repair-check {
				width: 680rpx;
				height: 290rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;

				text {
					font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
					font-weight: 400;
					font-style: normal;
					font-size: 17px;
				}
			}

			.maintenance-process {
				width: 680rpx;
				border: 1px solid #b6b6b6;
				border-radius: 3px;

			}

			.repair-information {
				width: 680rpx;
				border: 1px solid #b6b6b6;
				border-radius: 3px;
				margin-top: 40rpx;

				/deep/.uni-forms-item {
					border-bottom: 1px solid #b6b6b6;
				}
			}
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 160rpx;
			border-top: 1px solid #b6b6b6;
			display: flex;
			justify-content: space-around;
			align-items: flex-start;
			background: #ffffff;
			z-index: 5;

			.edit {
				background: #007aff;
			}

			button {
				width: 328rpx;
				height: 78rpx;
				line-height: 78rpx;
				margin-top: 18rpx;
			}
		}
	}
</style>
